<template>
	<div class="page">
		<Notice></Notice>
		<u-navbar :is-back="true" :title="article && (article.publisher_site_name || article.gather_site_name)">
			<view class="navbar-slot flex">
				<span class="source" @click="toSource">原文</span>
			</view>
		</u-navbar>
		<div class="content" v-if="article">
			<div class="user flex">
				<u-avatar class="avatar" :src="article.avatar" size="100"></u-avatar>
				<div class="info">
					<div class="name">{{article.name}}</div>
					<div class="time">
						{{$u.timeFormat((article.router_time || article.publish_time)*1000, "yyyy-mm-dd hh:MM")}} 
					</div>
				</div>
				<b class="sentiment" :class="'sentiment-'+article.sentiment_attr">{{article.sentiment_attr_name}}</b>
			</div>
			<div class="title text-cut3">
				<span class="warnlevel warnlevel-1">一般</span>
				<span v-html="marked(article.hit_keywords, article.title)"></span>
			</div>
			<div class="des flex">
				<span class="area">发布于 {{(article.ip_region && article.ip_region[0]) || article.province}}</span>
				<u-icon :name="isMore?'arrow-up':'arrow-down'" color="#666" size="28" @click="isMore=!isMore"></u-icon>
			</div>
			<div class="data" v-show="isMore">
				<div class="row flex">
					<div class="label">涉及关键词</div>
					<div class="value flex" v-if="article.hit_keywords && !!article.hit_keywords.length">
						<u-tag class="tag" :text="item" v-for="(item,index) in article.hit_keywords" :key="index" />
					</div>
					<div class="value " v-else>
						<u-tag class="tag" text="无（源于定向贴吧）" type="info" />
					</div>
				</div>
				<div class="row flex" v-if="article.user_warn">
					<div class="label">涉及预警词</div>
					<div class="value flex">
						<u-tag class="tag" :text="item" v-for="(item,index) in article.warn_words" :key="index" />
					</div>
				</div>
				
				<div class="row flex" v-if="pageParams.flag !== 'search'">
					<div class="label">涉及专题</div>
					<div class="value flex">
						<u-tag class="tag" :text="article.subject_title" type="info" />
					</div>
				</div>
				<div class="row flex" v-if="article.location">
					<div class="label">作者地域</div>
					<div class="value flex">
						<u-tag class="tag" :text="item" v-for="(item,index) in article.location" :key="index" />
						<u-tag class="tag" :text="article.province" v-if="article.province" />
					</div>
				</div>
				<div class="row flex" v-if="article.find_address && !!article.find_address.words.length">
					<div class="label">提及地域</div>
					<div class="value flex">
						<u-tag class="tag" :text="item" v-for="(item,index) in article.find_address.words" :key="index" />
					</div>
				</div>
				<div class="row flex">
					<div class="label">信源范围</div>
					<div class="value flex">
						<u-tag class="tag" :text="article.info_loc_province" type="info" v-if="article.info_loc_province" />
						<u-tag class="tag" text="暂无" type="info" v-else />
					</div>
				</div>
				<div class="row flex" v-if="article.place">
					<div class="label">签到地</div>
					<div class="value" v-html="marked(article.hit_keywords, article.place)"></div>
				</div>
			</div>
			<!-- 视频 -->
			<div class="video-box" v-if="article.video">
				<div class="title">视频</div>
				<div class="video-img" @click="play">
					<image style="display: block;height: 100%;margin: auto;" mode="heightFix" :src="(article.gather_site_name=='新浪微博视频'?'https://image.baidu.com/search/down?url=':'') + (article.surface_img || article.retweeted_surface_img)"></image>
					<u-icon class="play" name="play-circle" size="80"></u-icon>
				</div>
			</div>
			<div class="detail" v-if="article.publication_type==1">
				<u-parse :html="marked(article.hit_keywords, article.html || article.content || (article.ocr_dic && article.ocr_dic[Object.keys(article.ocr_dic)[0]]) || '')"></u-parse>
			</div>
			<div class="detail" v-else>
				<div class="repost" v-if="article.gather_site_name === '百度贴吧'">转评：{{ article.content }}</div>
				<div class="repost" v-else>转评：{{ article.title }}</div>
				<div class="source-box">
					<div class="text">{{ article.retweeted_content }}</div>
					<div class="time flex">
						<span>{{ $u.timeFormat(article.retweeted_publish_time*1000, "yyyy-mm-dd hh:MM") }}</span>
						<div class="retweeted-right flex">
							<u-icon class="retweeted-user" name="account-fill" color="#999" size="28"></u-icon>
							<span class="source-text-name">{{ article.retweeted_user_name }}</span>
						</div>
					</div>
				</div>
			</div>
			<!-- 图片 -->
			<div class="imgs" v-if="['新浪微博', '抖音'].includes(article.gather_site_name) && article.image">
				<div class="img-i" v-for="(item, index) in article.image" :key="index">
					<image mode="widthFix" style="width: 100%;" @click="previewImg(article.image)" :src="((article.gather_site_name.includes('新浪微博')||article.gather_site_name=='微信') ? 'https://image.baidu.com/search/down?url=' : '')+item"></image>
				</div>
			</div>
			<div class="imgs" v-if="article.ocr_dic">
				<div class="img-i" v-for="(item, index) in article.ocr_dic" :key="index">
					<!-- <u-image mode="widthFix" width="100%" height="auto" :src="((article.gather_site_name.includes('新浪微博')||article.gather_site_name=='微信') ? 'https://image.baidu.com/search/down?url=' : '')+index"></u-image> -->
					<image mode="widthFix" style="width: 100%;" @click="previewImg(article.ocr_dic, index)" :src="((article.gather_site_name.includes('新浪微博')||article.gather_site_name=='微信') ? 'https://image.baidu.com/search/down?url=' : '')+index"></image>
					<div>【OCR】：{{item}}</div>
				</div>
			</div>
		</div>
		<!-- 相似信息 -->
		<div class="similar" v-if="!!similarArticleList.length">
			<div class="title">相似信息</div>
			<div class="list">
				<div class="item" v-for="item in similarArticleList" :key="item.id" @click="toDestails(item)">
					<div class="i-title text-cut">{{ item.title || item.content }}</div>
					<div class="i-des flex">
						<span class="date">{{ $u.timeFormat((item.router_time || item.publish_time)*1000, "yyyy-mm-dd hh:MM") }}</span>
						<span class="platform">{{ item.gather_site_name }}</span>
					</div>
				</div>
			</div>
		</div>
		<div class="options flex" v-if="article">
			<div class="option link" @click="copyLink">
				<div class="icon-box flex">
					<u-image class="icon" width="50rpx" height="50rpx" src="./../../static/link.png"></u-image>
				</div>
				复制链接
			</div>
			<div class="option info" @click="copyInfo">
				<div class="icon-box flex">
					<u-image class="icon" width="50rpx" height="50rpx" src="./../../static/copy.png"></u-image>
				</div>
				复制信息
			</div>
			<div class="option warn" @click="warn">
				<div class="icon-box flex">
					<u-image class="icon" width="50rpx" height="50rpx" src="./../../static/remind.png"></u-image>
				</div>
				加入预警
			</div>
			<div class="option del" @click="del" v-if="own.includes(56)">
				<div class="icon-box flex">
					<u-image class="icon" width="50rpx" height="50rpx" src="./../../static/delete.png"></u-image>
				</div>
				删除
			</div>
			<div class="option more" @click="more">
				<div class="icon-box flex">
					<u-image class="icon" width="50rpx" height="50rpx" src="./../../static/more_dot.png"></u-image>
				</div>
				更多
			</div>
		</div>
		<u-toast ref="uToast" />
		<AddWarn :id="addWarnData.id" :subjectId="addWarnData.subjectId" :isWarn="isWarn" :text="warnText" :text_tmp="warnText_tmp"></AddWarn>
		<DelArticle :row="{...article, id:pageParams.id}" :isDel="isDel" @close="isDel=false"></DelArticle>
		<Action :row="{...article, id:pageParams.id}"></Action>
	</div>
</template>

<script>
import { articleDetail, articleSimilar, toRead, searchArticleDetail } from "@/api/subject.js";
import AddWarn from "@/components/addWarn.vue";
import DelArticle from "@/components/delArticle.vue";
import Action from "@/components/action.vue";

export default {
	components: {
		AddWarn, DelArticle, Action
	},
	data() {
		return {
			statusBarHeight: uni.getStorageSync("statusBarHeight"),
			own: uni.getStorageSync("own"),
			pageParams: null,
			article: null,
			isMore: true,
			
			isWarn: false,
			addWarnData: {
				id: "",
				subjectId: "",
			},
			warnText: "",
			warnText_tmp: "",
			
			isDel: false,
			similarArticleList: [],
			
			isMask: false
		};
	},
	onLoad: function (option) {
		this.pageParams = option;
		this.addWarnData.id = option.id;
		this.getData();
		
		if(this.pageParams.flag !== "search") toRead({ids: [option.id]}).then();
		
		uni.$on("markSentiment",({ids, val})=>{
			this.article.sentiment_attr = val; 
			this.article.sentiment_attr_name = val==1?"正":val==2?"中":"负";
		});
	},
	methods: {
		async getData() {
			uni.showLoading({title: "加载中"});
			const { data } = this.pageParams.flag === "search" ? await searchArticleDetail(this.pageParams) : await articleDetail(this.pageParams);
			uni.hideLoading();
			this.article = data;
			if(this.article.url.includes("#ocr")) this.article.url = this.article.url.replace("#ocr", "");
			this.addWarnData.subjectId = data.subject_id+"";
			this.warnText = `${this.$u.timeFormat(data.publish_time*1000, "yyyy-mm-dd hh:MM")}，[${data.subject_title}]出现预警信息，标题为:${data.title}`;
			this.warnText_tmp = this.warnText;
			if(this.article.user_warn && !!this.article.user_warn.length){
				this.article.warn_words =  [];
				this.article.user_warn.map(item=>{
					this.article.warn_words = [
						...this.article.warn_words,
						...item.words.word1,
						...item.words.word2,
						...item.words.word3,
					];
				});
			}
			articleSimilar({
				hashcode: data.hashcode_5,
				level: "",
				page: 1,
				limit: 10,
				gather_site_name: data.gather_site_name,
				url_key: data.url_key
			}).then(({data})=>{
				this.similarArticleList = data.list;
			});
		},
		toSource() {
			// #ifdef APP-PLUS
			this.$u.route("/pages/webview/webview",{
				url: encodeURIComponent(this.article.url),
			});
			// #endif
			
			// #ifdef H5
			window.open(this.article.url);
			// #endif
		},
		copyLink() {
			uni.setClipboardData({
				data: this.article.url,
				showToast: false,
				success: ()=>{
					this.$refs.uToast.show({
						title: "复制链接成功",
						type: "success",
					});
				}
			});
		},
		copyInfo() {
			let {fields,list} = uni.getStorageSync("copyTemplate");
			let keys = list.map(item=>item.title);
			let arr = [];
			fields.map(item=>{
				if(keys.includes(item.title)){
					if(item.title == "标题"){
						arr.push(item.title+"：" + this.article.title || this.article.summary.slice(0,30));
					}else if(item.title == "时间"){
						arr.push(item.title+"：" + this.$u.timeFormat(this.article[item.key]*1000, "yyyy-mm-dd hh:MM"));
					}else if(item.title == "倾向性"){
						arr.push(item.title+"：" + (this.article.sentiment_attr==1?"正面":(this.article.verified_type==2?"中性":"负面")));
					}else if(item.title == "涉及关键词"){
						arr.push(item.title+"：" + this.article[item.key].join(","));
					}else if(item.title == "涉事省份"){
						arr.push(item.title+"：" + this.article?.ip_region[0] || this.article?.province);
					}else if(item.title == "认证类型"){
						arr.push(item.title+"：" + (this.article.verified_type==-1?"普通用户":(this.article.verified_type==0?"个人认证":"机构认证")));
					}else{
						arr.push(item.title+"：" + (this.article[item.key] ? this.article[item.key] : ""));
					}
				}
			});
			uni.setClipboardData({
				data: arr.join("\n"),
				showToast: false,
				success: ()=>{
					this.$refs.uToast.show({
						title: "复制信息成功",
						type: "success",
					});
				}
			});
		},
		warn() {
			this.isWarn = true;
		},
		del() {
			this.isDel = true;
		},
		more() {
			this.$store.state.isAction = true;
			this.actionData = {
				row: this.article,
				flag: "details"
			};
		},
		play() {
			this.isMask = true;
			this.$u.route("/pages/videoPreview/videoPreview",{
				url: this.article.video ? this.article.video[0] : "",
				poster: this.article.surface_img,
				site: this.article.gather_site_name,
				source: this.article.url
			});
		},
		back() {
			this.isMask = false;
			this.video.pause();
		},
		toDestails(e) {
			this.$u.route("/pages/details/details",{
				id: e.sid,
				l_id: e.l_id
			});
		},
		previewImg(imgs) {
			let arr = Object.keys(imgs);
			uni.previewImage({
				urls: arr,
				longPressActions: {
					itemList: ['保存图片'],
					success: function(data) {
						uni.downloadFile({
							url: arr[data.index],
							success: (res) => {
								if (res.statusCode === 200) {
									uni.saveImageToPhotosAlbum({  
										filePath: res.tempFilePath,  
										success: function(res2) {  
											uni.showToast({  
												title: "保存成功",  
												icon: "success",  
												duration: 3000  
											})  
										},  
										fail: function(err) {  
											console.log("save error", err.errMsg);
										}  
									});
								}
							},
						});
					},
				}
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.page{
	padding-bottom: 120rpx;
	overflow-x: hidden;
}
.navbar-slot{
	width: 100%;
	justify-content: flex-end;
	padding-right: 40rpx;
	.source{
		color: #1E62FC;
		font-size: 30rpx;
	}
}
.content{
	min-height: 400rpx;
}
.user{
	position: relative;
	z-index: 1;
	padding: 30rpx;
	.avatar{
		margin-right: 20rpx;
	}
	.name{
		font-size: 38rpx;
		line-height: 48rpx;
		padding-top: 10rpx;
		padding-right: 20rpx;
	}
	.time{
		margin-top: 16rpx;
	}
	.sentiment{
		position: absolute;
		z-index: 1;
		top: 20rpx;
		right: 20rpx;
		font-size: 32rpx;
	}
	.sentiment-1 {
		color: #3477FF;
	}
	.sentiment-2 {
		color: #F8B551;
	}
	.sentiment-3 {
		color: #E60012;
	}
}
.title{
	padding: 0 30rpx;
	font-size: 36rpx;
	line-height: 52rpx;
	font-weight: bold;
}
.warnlevel{
	color: #fff;
	font-size: 26rpx;
	padding: 4rpx 10rpx;
	margin-right: 10rpx;
	border-radius: 4rpx;
}
.warnlevel-1 {
	background-color: #3477FF;
}
.warnlevel-2 {
	background-color: #F8B551;
}
.warnlevel-3 {
	background-color: #E60012;
}
.des{
	margin-top: 10rpx;
	padding: 0 30rpx 20rpx;
	justify-content: space-between;
	border-bottom: 1rpx solid #F0F0F0;
}
.data{
	padding: 10rpx 30rpx;
	border-bottom: 1rpx solid #F0F0F0;
	.label{
		width: 160rpx;
		color: #666;
		font-size: 28rpx;
		line-height: 28rpx;
		padding-top: 10rpx;
	}
	.value{
		flex: 1;
		flex-wrap: wrap;
	}
	.row{
		margin: 10rpx 0;
	}
	.tag{
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}
}
.detail{
	width: 100%;
	padding: 30rpx;
	box-sizing: border-box;
}
.options{
	position: fixed;
	z-index: 100;
	bottom: 0;
	left: 0;
	width: 100%;
	flex-wrap: wrap;
	padding: 20rpx 0;
	box-sizing: border-box;
	justify-content: space-around;
	background-color: #fff;
	border-top: 2rpx solid #ccc;
	
	.option{
		width: 100rpx;
		text-align: center;
		color: #666;
		font-size: 24rpx;
	}
	.icon-box{
		display: block;
		margin-bottom: 10rpx;
	}
	.icon{
		margin: auto;
	}
}
.source-box{
	border: 1rpx solid #1E62FC;
	padding: 10rpx;
	border-radius: 10rpx;
	margin: 10rpx 0;
	.text{
		font-size: 28rpx;
	}
	.time{
		justify-content: space-between;
		margin-top: 20rpx;
		font-size: 26rpx;
	}
}
.imgs{
	padding: 20rpx;
}
.similar{
	padding-bottom: 30rpx;
	.title{
		font-size: 28rpx;
		border-bottom: 1rpx solid #F0F0F0;
	}
	.item{
		width: 100%;
		box-sizing: border-box;
		margin-top: 20rpx;
		padding: 0 20rpx;
		.i-title{
			width: 100%;
			margin-bottom: 10rpx;
		}
		.i-des{
			justify-content: space-between;
			font-size: 24rpx;
			color: #999;
		}
	}
}
.video-box{
	.title{
		font-size: 28rpx;
		border-bottom: 1rpx solid #F0F0F0;
	}
	.video{
		width: 100%;
		height: 360rpx;
	}
	.video-img{
		width: 100%;
		height: 360rpx;
		background-color: #010101;
		position: relative;
		z-index: 1;
	}
	.play{
		color: #fff;
		cursor: pointer;
		position: absolute;
		z-index: 1;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}
</style>